<template>
    <el-menu
        :default-active="activePath"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
    >
        <template>
            <!-- <el-submenu v-if="item.children" index="1" :key="item._id">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item
                    v-for="item2 in item.children"
                    :key="item2._id"
                    :index="item2.index"
                    >{{ item2.menuName }}</el-menu-item
                >
            </el-submenu> -->
            <el-menu-item  v-for="item in menus" :key="item._id" :index="item.index">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.menuName }}</span>
            </el-menu-item>
        </template>

        <!-- <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
            </template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-submenu>
        <el-menu-item index="/home/main">
            <i class="el-icon-star-off"></i>
            <span slot="title"> 主页 </span>
        </el-menu-item>
        <el-menu-item index="/home/students">
            <i class="el-icon-menu"></i>
            <span slot="title">学生管理</span>
        </el-menu-item>
        <el-menu-item index="/home/classes">
            <i class="el-icon-document"></i>
            <span slot="title">班级管理</span>
        </el-menu-item>
        <el-menu-item index="/home/teachers">
            <i class="el-icon-setting"></i>
            <span slot="title">老师管理</span>
        </el-menu-item> -->
    </el-menu>
</template>

<script>
// import { mapState } from "vuex";
// 获取命名空间函数,通过这个函数指定获取某个命名空间下面数据
// import {createNamespacedHelpers} from "vuex"
// 传递命名空间,生成当前这个模块辅助函数
// const {mapState:userMapState} = createNamespacedHelpers("userModules")
// const {mapState:classesMapState} = createNamespacedHelpers("classesModules")

export default {
    data() {
        return {
            menus: [
                {
                    _id: 1,
                    index: "/home",
                    icon: "el-icon-menu",
                    menuName: "首页",
                  
                }, 
                 {   
                    _id: 2, 
                    index: "/home/user",
                    icon: "el-icon-document",
                    menuName: "用户管理",
                    
                },
                 {
                    _id: 3,
                    index: "/home/slideshow",
                    icon: "el-icon-document",
                    menuName: "轮播图管理",
                   
                },
                 {   
                    _id: 4,
                    index: "/home/recipe",
                    icon: "el-icon-document",
                    menuName: "菜谱管理",
                     
                },
                {    _id: 5,
                    index: "/home/vips",
                    icon: "el-icon-menu",
                     menuName: "会员管理",
                    // children: [  
                    //     {
                    //         _id: 51,
                    //         index: "/home/vips",
                    //         icon: "el-icon-document",
                    //         menuName: "会员列表",
                          
                    //     },
                    //     {
                    //         _id: 52,
                    //         index: "/home/addvips",
                    //         icon: "el-icon-document",
                    //         menuName: "添加会员",
                           
                    //     },
                    // ],
                },
                {
                    _id: 6,
                    index: "/home/recipes",
                    icon: "el-icon-document",
                    menuName: "套餐管理",
                   
                },
               
            ],
            activePath:this.$route.path    
        };
    },
    created(){
        // console.log(this.$route);
        // console.log(this.user);
        // console.log(this.className);
    },
    computed: {
        // ...userMapState(["user"]),
        // ...classesMapState(["className"]),
        filterMenus() {
            let array = [];
         
            // 从服务器获取menus菜单
            this.menus.forEach((item) => {
                if (item.children) {
                    if (item.children.length) {
                        let role = {
                            icon: item.icon,
                            title: item.title,
                            children: [],
                        };
                        item.children.forEach((item2) => {
                            if (item2.auth.includes(this.user.auth)) {
                                role.children.push(item2);
                            }
                        });
                        if (role.children.length) {
                            array.push(role);
                        }
                    }
                } else {
                    if (item.auth.includes(this.user.auth)) {
                        array.push(item);
                    }
                }
            });
            console.log(array);
            return array;
        },
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
    height: 100%;
    text-align: left;
}
</style>